<template>
  <div class="login-container">
    <div class="bg-circle">
      <img
        class="lt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u3.png"
        alt=""
      >
      <img
        class="lb"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u5.png"
        alt=""
      >
      <img
        class="rt"
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0%E7%99%BB%E9%99%86%E9%A1%B5/u4.png"
        alt=""
      >
    </div>
    <div class="main">
      <img
        src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u25.png"
        alt=""
      >
      <el-card shadow="never">
        <div class="title">
          <img
            src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u24.png"
            alt=""
          >
          <h2>⼈⼒资源后台管理</h2>
        </div>
        <!-- 登录表单 -->
        <el-form ref="form" :model="loginForm" :rules="loginRules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="手机号">
              <template #prefix>
                <img
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u13.png"
                  alt=""
                >
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="密码">
              <template #prefix>
                <img
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u17.png"
                  alt=""
                >
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="yanzhengma2">
            <el-input v-model="loginForm.yanzhengma2" placeholder="验证码">
              <template slot="append"><span>{{ loginForm.yanzhengma }}</span></template>
              <template #prefix>
                <img
                  src="https://img.axureshop.com/7a/4a/a8/7a4aa826e79b40d086fba67fb100e0f9/images/0登陆页/u21.png"
                  alt=""
                >
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">⽤户平台使⽤协议</el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" style="width: 350px; height: 44px;" @click="loginClick">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        mobile: process.env.NODE_ENV === 'development' ? '13838273382' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        isAgree: process.env.NODE_ENV === 'development',
        yanzhengma: '9527',
        yanzhengma2: ''
      },
      loginRules: {
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { trigger: 'blur', pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur' }
        ],
        yanzhengma2: [
          { required: true, message: '验证码不能为空', trigger: 'blur' },
          { validator: (rules, value, callback) => value === this.loginForm.yanzhengma ? callback() : callback(new Error('验证码不正确')) }
        ],
        isAgree: [
          { validator: (rules, value, callback) => value ? callback() : callback(new Error('请勾选用户协议')) }
        ]
      }
    }
  },
  methods: {
    loginClick() {
      this.$refs.form.validate(async(isOk) => {
        if (isOk) {
          await this.$store.dispatch('user/loginActions', this.loginForm)
          this.$router.push({ path: '/' })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-icon-user{
  font-size: 15px;
}
.login-container {
 position: relative;
 height: 100%;
 background-image: linear-gradient(#3fccfd, #996cfb);
 overflow: hidden;
 // 三个圆形图⽚的位置
 .bg-circle {
 .lt {
 position: absolute;
 left: 40px;
 top: 40px;
 opacity: 0.3;
 }
 .lb {
 position: absolute;
 left: -250px;
 bottom: -200px;
 }
 .rt {
 position: absolute;
 right: -70px;
 top: -200px;
 }
 }
 // 主体内容
 .main {
 // ⽔平和垂直居中
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 display: flex;
 align-items: center;
 // 登录卡⽚
 .el-card {
 margin-left: 60px;
 // 卡⽚标题
 .title {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 23px;
 font-weight: 700;
 font-style: normal;
 color: rgb(67, 141, 238);
 img {width: 50px;
 height: 42px;
 }
 }
 // 登录表单⽂本框
 .el-input {
 width: 350px;
 height: 44px;
 // ⽂本框内容
 ::v-deep .el-input__inner {
 background-color: #fff;
 height: 44px;
 border: 1px solid black;
 }
 // ⽂本框头部图标样式
 img {
 width: 20px;
 height: 20px;
 margin-top: 12px;
 }
 // ⽂本框尾部验证码样式
 ::v-deep .el-input-group__append {
 font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
 font-weight: 700;
 font-size: 16px;
 color: #FF7733;
 background-color: #606266;
 // height: 44px;
 }
 }
 // 复选款样式
 .el-checkbox {
 color:#606266;
 }
 // 登录按钮样式
 .login-btn {
 width: 350px;
 }
 }
 }
}

</style>
